<template>
  <div class="change-password">
    <div class="password-header">
      <button class="back-btn" @click="goBack">
        <span class="icon-back">←</span>
      </button>
      <h1 class="title">修改密码</h1>
      <div class="placeholder"></div>
    </div>

    <div class="password-content">
      <div class="password-form">
        <div class="form-item">
          <label class="form-label">新密码</label>
          <div class="input-wrapper">
            <input 
              v-model="formData.newPassword"
              :type="showNewPassword ? 'text' : 'password'"
              class="form-input"
              placeholder="请输入新密码（6-20位）"
            />
            <button 
              class="toggle-password"
              @click="showNewPassword = !showNewPassword"
            >
              {{ showNewPassword ? '👁️' : '👁️‍🗨️' }}
            </button>
          </div>
          <div class="password-strength" v-if="formData.newPassword">
            <div class="strength-bar">
              <div 
                class="strength-fill" 
                :class="passwordStrength.level"
                :style="{ width: passwordStrength.width }"
              ></div>
            </div>
            <span class="strength-text" :class="passwordStrength.level">
              {{ passwordStrength.text }}
            </span>
          </div>
        </div>

        <div class="form-item">
          <label class="form-label">确认新密码</label>
          <div class="input-wrapper">
            <input 
              v-model="formData.confirmPassword"
              :type="showConfirmPassword ? 'text' : 'password'"
              class="form-input"
              placeholder="请再次输入新密码"
            />
            <button 
              class="toggle-password"
              @click="showConfirmPassword = !showConfirmPassword"
            >
              {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
            </button>
          </div>
        </div>

        <div class="tips">
          <p class="tip-title">密码要求：</p>
          <ul class="tip-list">
            <li>长度为6-20个字符</li>
            <li>建议包含字母、数字和特殊字符</li>
            <li>不要使用过于简单的密码</li>
          </ul>
        </div>

        <button 
          class="submit-btn" 
          @click="handleSubmit"
          :disabled="submitting"
        >
          {{ submitting ? '提交中...' : '确认修改' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { changePassword } from '@/api/user'

const router = useRouter()
const userStore = useUserStore()

const showNewPassword = ref(false)
const showConfirmPassword = ref(false)
const submitting = ref(false)

const formData = reactive({
  newPassword: '',
  confirmPassword: ''
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 计算密码强度
const passwordStrength = computed(() => {
  const password = formData.newPassword
  if (!password) return { level: '', width: '0%', text: '' }

  let strength = 0
  
  // 长度检查
  if (password.length >= 6) strength += 1
  if (password.length >= 10) strength += 1
  
  // 包含数字
  if (/\d/.test(password)) strength += 1
  
  // 包含小写字母
  if (/[a-z]/.test(password)) strength += 1
  
  // 包含大写字母
  if (/[A-Z]/.test(password)) strength += 1
  
  // 包含特殊字符
  if (/[^a-zA-Z0-9]/.test(password)) strength += 1

  if (strength <= 2) {
    return { level: 'weak', width: '33%', text: '弱' }
  } else if (strength <= 4) {
    return { level: 'medium', width: '66%', text: '中' }
  } else {
    return { level: 'strong', width: '100%', text: '强' }
  }
})

// 验证表单
const validateForm = () => {
  if (!formData.newPassword) {
    alert('请输入新密码')
    return false
  }

  if (formData.newPassword.length < 6 || formData.newPassword.length > 20) {
    alert('新密码长度必须为6-20个字符')
    return false
  }

  if (!formData.confirmPassword) {
    alert('请确认新密码')
    return false
  }

  if (formData.newPassword !== formData.confirmPassword) {
    alert('两次输入的新密码不一致')
    return false
  }

  return true
}

// 提交修改
const handleSubmit = async () => {
  if (!validateForm()) return

  submitting.value = true
  try {
    console.log('准备修改密码，用户ID:', userStore.uid, '新密码:', formData.newPassword)
    const res = await changePassword(userStore.uid, formData.newPassword)
    console.log('修改密码响应:', res)

    if (res.code === 200) {
      alert('密码修改成功，请重新登录')
      // 清除登录状态
      userStore.logout()
      router.push('/user/login')
    } else {
      alert(res.msg || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    alert('修改密码失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.change-password {
  min-height: 100vh;
  background: #f5f7fa;
}

.password-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
}

.back-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.back-btn:hover {
  transform: translateX(-4px);
}

.icon-back {
  font-size: 1.8rem;
}

.title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.placeholder {
  width: 40px;
}

.password-content {
  padding: 20px;
}

.password-form {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  padding: 12px 45px 12px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.toggle-password {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.toggle-password:hover {
  opacity: 1;
}

.password-strength {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.strength-bar {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s;
  border-radius: 2px;
}

.strength-fill.weak {
  background: #ef4444;
}

.strength-fill.medium {
  background: #f59e0b;
}

.strength-fill.strong {
  background: #10b981;
}

.strength-text {
  font-size: 0.85rem;
  font-weight: 500;
  min-width: 30px;
}

.strength-text.weak {
  color: #ef4444;
}

.strength-text.medium {
  color: #f59e0b;
}

.strength-text.strong {
  color: #10b981;
}

.tips {
  background: #f0f9ff;
  border-left: 3px solid #1976d2;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.tip-title {
  font-weight: 600;
  color: #1976d2;
  margin: 0 0 8px 0;
  font-size: 0.9rem;
}

.tip-list {
  margin: 0;
  padding-left: 20px;
  color: #374151;
  font-size: 0.85rem;
}

.tip-list li {
  margin-bottom: 4px;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1976d2, #1565c0);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.4);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .password-content {
    padding: 16px;
  }

  .password-form {
    padding: 20px;
  }

  .form-item {
    margin-bottom: 20px;
  }
}
</style>
